import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import styles from './index.module.css';
import Nabar from '../../conpoment/Nabar';
import tup from './img/image.png'
function Index() {
  const nav = useNavigate();
  const location = useLocation();
  const [selectedCampus, setSelectedCampus] = useState('');
  // 院区数据
  const campuses = [
    {
      id: 1,
      name: '四川省保健院南苑',
      address: '四川省成都市锦江区画溪路666号',
      icon: tup
    },
    {
      id: 2,
      name: '四川省保健院北苑',
      address: '四川省成都市锦江区画溪路666号',
     icon: tup
    },
    {
      id: 3,
      name: '四川省保健院体检中心',
      address: '四川省成都市锦江区画溪路666号',
      icon: tup
    }
  ];
  // 获取上一个路由信息
  const previousPath = location.state?.from || '';
  console.log('上一个路由:', previousPath);

  const handleCampusSelect = (campusId: number) => {
    setSelectedCampus(campusId.toString());
    console.log('选择院区:', campusId);
    // 根据上一个路由决定跳转目标
    if (previousPath === '/appointment') {
      console.log('检测到来自appointment页面，跳转到appointment_xq');
      nav(`/appointment_xq/${campusId}`);
    } else if (previousPath === '/self-service-order') {
      console.log('检测到来自self-service-order页面，跳转到self_xq');
      nav('/self_xq');
    } else if (previousPath === 'medical-tech-appointment') {
      console.log('检测到来自medical-tech-appointment页面，跳转到medical-tech-select');
      nav('/medical-tech-select');
    } else if (previousPath === '/self-service-number') {
      console.log('检测到来自self-service-number页面，跳转到self-service-department');
      nav('/self-service-department');
    } else {
      // 默认跳转到appointment_xq
      console.log('默认跳转到appointment_xq');
      nav(`/appointment_xq/${campusId}`);
    }
  };
  return (
    <div className={styles.container}>
      <Nabar title='院区列表' sticky={false} />
      <div className={styles.content}>
        <div className={styles.prompt}>
          <p>请选择院区</p>
        </div>
        <div className={styles.campusList}>
          {campuses.map((campus) => (
            <div 
              key={campus.id} 
              className={`${styles.campusCard} ${selectedCampus === campus.id.toString() ? styles.selected : ''}`}
              onClick={() => handleCampusSelect(campus.id)}
            >
              <div className={styles.campusIcon}>
                <div className={styles.iconWrapper}>
                 <img src={campus.icon} alt="" />
                </div>
              </div>
              <div className={styles.campusInfo}>
                <h3 className={styles.campusName}>{campus.name}</h3>
                <p className={styles.campusAddress}>{campus.address}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
export default Index